﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ext.Master" AutoEventWireup="true" CodeBehind="Ext.GridRowCommand.aspx.cs" Inherits="Demo.Grid.Ext_GridRowCommand" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.define('Material', {
                extend: 'Ext.data.Model',
                fields: ['物料ID', '物料名称', '物料编码']
            });

            var store = Ext.create('Ext.data.Store', {
                pageSize: 10,
                model: 'Material',
                remoteSort: true,
                proxy: {
                    url: '/common/GetPageData.ashx',
                    type: 'ajax',
                    reader: {
                        type: 'json',
                        root: 'Data',
                        totalProperty: 'TotalCount'
                    }
                    // sends single sort as multi parameter
                    //simpleSortMode: true
                }
            });

            var selectModel = Ext.create('Ext.selection.CheckboxModel', {
                checkOnly: false,    //只有单击checkbox才能够选中行，默认为单击行就能选中
                injectCheckbox: 1,    //插入checkbox 列的位置，默认为0
                mode: 'SIMPLE',  //SINGLE 单选 MULTI 多选（可以使用CTRL和SHIFT） SIMPLE 简单选择（多选，需要单击每一行来选中）
                showHeaderCheckbox: false //在列头显示checkbox，默认为true
            });
            var grid = Ext.create('Ext.grid.Panel', {
                renderTo: 'dynamicGrid',
                id: 'dynamicGrid',
                height: 200,
                width: 600,
                columnLines: true,
                rowLines: true,
                resizable: false,
                disabled: false,
                store: store,
                selModel: selectModel,
                bbar: {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    store: store
                },
                columns: [
                    {
                        xtype: 'rownumberer',
                        width: 40,
                        resizable: true,
                        sortable: false
                    },
                    {
                        text: '物料编码',
                        width: 100,
                        sortable: false,
                        dataIndex: '物料编码'
                    },
                    {
                        text: '物料名称',
                        flex: 1,
                        sortable: false,
                        dataIndex: '物料名称'
                    },
                    {
                        xtype: 'actioncolumn',
                        width: 40,
                        sortable: false,
                        text: '操作',
                        items: [{
                            icon: '/icons/delete.png',
                            tooltip: '删除本行',
                            text: '删除',
                            actionName:'delete',
                            handler: function (grid, rowIndex, colIndex, actionConfig, eventObject, record, dom) {
                                store.removeAt(rowIndex);
                                var td = event.srcElement;
                            }
                        }]
                    }
                ]
            });
            store.loadPage(1);
            //store.currentPage = data.CurrentPage;
            //store.loadRawData(data);

            //添加滚动条滚动事件
            //var queryEl = $(grid.getView().el.dom);
            //queryEl.scrollTop(30);
        });

        Ext.onReady(function () {
            Ext.create('Ext.data.Store', {
                storeId: 'employeeStore',
                fields: ['firstname', 'lastname', 'seniority', 'department'],
                groupField: 'department',
                data: [
                    { firstname: "Michael", lastname: "Scott", seniority: 7, department: "Management" },
                    { firstname: "Dwight", lastname: "Schrute", seniority: 2, department: "Sales" },
                    { firstname: "Jim", lastname: "Halpert", seniority: 3, department: "Sales" },
                    { firstname: "Kevin", lastname: "Malone", seniority: 4, department: "Accounting" },
                    { firstname: "Angela", lastname: "Martin", seniority: 5, department: "Accounting" }
                ]
            });

            Ext.create('Ext.grid.Panel', {
                title: 'Column Template Demo',
                store: Ext.data.StoreManager.lookup('employeeStore'),
                columns: [
                    { text: 'Full Name', xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex: 1 },
                    { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
                ],
                height: 200,
                width: 600,
                renderTo: Ext.getBody()
            });
        });

        function btnClick() {
            var selModel = Ext.getCmp('dynamicGrid').getSelectionModel();
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="dynamicGrid"></div>
    <input type="button" value="确定" onclick="btnClick()" />
</asp:Content>
